<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer.visible"
    direction="rtl"
    @close="handleClose(false)"
  >
    <div class="drawer-content">
      <template>
        <el-radio-group v-model="formData.type" :disabled="drawer.method === 'edit'">
          <el-radio :label="0">系统</el-radio>
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="2">按钮</el-radio>
        </el-radio-group>
      </template>
      <template>
        <el-form ref="form" :model="formData" label-width="90px" label-position="left">
          <el-form-item label="目录名称：" prop="menuName">
            <el-input v-model="formData.menuName"></el-input>
          </el-form-item>
          <el-form-item v-show="formData.type === 1" label="菜单url：" prop="url">
            <el-input v-model="formData.url"></el-input>
          </el-form-item>
          <el-form-item v-show="formData.type === 1" label="上级菜单：" prop="parentId">
            <treeselect
              v-model="formData.parentId"
              :options="options"
              :normalizer="normalizer"
              placeholder="请选择上级菜单"
            ></treeselect>
          </el-form-item>
          <el-form-item v-show="formData.type === 1" label="组件名称：" prop="componentName">
            <el-input v-model="formData.componentName"></el-input>
          </el-form-item>
          <el-form-item v-show="formData.type === 1" label="组件地址：" prop="component">
            <el-input v-model="formData.component"></el-input>
          </el-form-item>
          <el-form-item v-show="formData.type === 1" label="是否为单个一菜单：" prop="icon" label-width="140px">
            <el-radio v-model="formData.layout" :label="true">是</el-radio>
            <el-radio v-model="formData.layout" :label="false">否</el-radio>
          </el-form-item>
          <el-form-item label="图标：" prop="icon">
            <el-input v-model="formData.icon"></el-input>
          </el-form-item>
          <el-form-item label="排序号：" prop="orderNum">
            <el-input v-model="formData.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template>
        <el-button type="primary" @click="handleCommit">确定</el-button>
        <el-button @click="handleClose(false)">取消</el-button>
      </template>
    </div>
  </el-drawer>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getMenuList, getMenuInfo, addMenu, updateMenu } from '@/api/authority'

export default {
  name: 'MenuDrawer',
  components: {
    Treeselect
  },
  props: {
    drawerState: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      drawer: {
        visible: false,
        method: '',
        params: {}
      },
      title: '',
      formData: {
        parentId: null,
        menuName: '',
        url: '',
        componentName: '',
        component: '',
        icon: '',
        orderNum: '',
        type: 0,
        layout: false
      },
      options: []
    }
  },
  watch: {
    drawerState: {
      handler(newVal) {
        this.drawer = {
          visible: newVal.visible,
          method: newVal.method,
          params: newVal.params
        }
        if (newVal.visible) {
          this.handleDrawerVisible()
        }
      },
      deep: true
    }
  },
  methods: {
    handleClose(flag) {
      this.$refs.form.resetFields()
      this.$emit('drawerClose', flag)
    },
    handleDrawerVisible() {
      this.getMenuList()
      if (this.drawer.method === 'add') {
        this.title = '新增菜单信息'
      } else {
        this.title = '修改菜单信息'
        this.getMenuInfo()
      }
    },
    async getMenuList() {
      const res = await getMenuList()
      this.options = res.data
    },
    async getMenuInfo() {
      const res = await getMenuInfo(this.drawer.params)
      this.formData.parentId = res.data.parentId
      this.formData.menuName = res.data.menuName
      this.formData.url = res.data.url
      this.formData.component = res.data.component
      this.formData.componentName = res.data.componentName
      this.formData.layout = res.data.layout
      this.formData.icon = res.data.icon
      this.formData.orderNum = res.data.orderNum
      this.formData.type = res.data.type
      if (this.formData.parentId === 0) {
        this.formData.parentId = null
      }
    },
    async handleCommit() {
      if (this.formData.type === 0) {
        this.formData.parentId = 0
      }
      if (this.drawer.method === 'add') {
        await addMenu(this.formData)
      } else {
        this.formData.menuId = this.drawer.params
        await updateMenu(this.formData)
      }
      this.handleClose(true)
    },
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node.children == null || !node.children.length) {
        delete node.children
      }
      return {
        id: node.menuId,
        // 将name转换成必填的label键
        label: node.menuName,
        children: node.children
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-drawer__wrapper {
    .el-drawer__body {
      .drawer-content {
        padding: 0 20px;
        .el-form {
          margin-top: 20px;
        }
      }
    }
  }
</style>
